<template>
  <base-chart :options="options" :height="height" />
</template>

<script setup>
import BaseChart from '@/base-ui/echart/base-chart.vue'
import { computed } from 'vue'

const props = defineProps({
  height: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  xLabels: {
    type: Array,
    default: () => []
  },
  yValues: {
    type: Array,
    default: () => []
  }
})

const options = computed(() => {
  return {
    grid: {
      left: '10',
      right: '10',
      top: '10',
      bottom: '10',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgba(50, 216, 205, 1)'
        }
      }
    },
    xAxis: {
      type: 'category',
      data: props.xLabels
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: props.yValues,
        type: 'line'
      }
    ]
  }
})
</script>
